<template>
	<view class="">
		<view class="districtSelector">
			<view class="districtSelector-haed">
				<view class="cancel" @tap='cancel'>
					取消
				</view>
				<view class="confirm" @tap='confirm'>
					确定
				</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" :value="defaultSelected" @change="columnChange"
				class="picker-view">
				<picker-view-column>
					<view class="item" style="height: 40px; line-height: 40px;text-align: center;"
						v-for="(item,index) in province_list" :key="index">{{item.lable}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" style="height: 40px; line-height: 40px;text-align: center;"
						v-for="(item,index) in city_list" :key="index">{{item.lable}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" style="height: 40px; line-height: 40px;text-align: center;"
						v-for="(item,index) in county_list" :key="index">{{item.lable}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	import areaList from './data.js'
	export default {
		props: {
			defaultSelected: {
				type: Array,
				default: () => {
					return [0, 0, 0]
				}
			},
		},
		watch: {
			defaultSelected(new_val, old_val) {
				this.city_list = [];
				this.county_list = [];
				this.setColumnData();
			}
		},
		data: function() {
			return {
				province_list: [],
				city_list: [],
				county_list: [],
				indicatorStyle: `height: 40px;`,
			}
		},
		methods: {
			columnChange: function(e) {
				let data = e.detail.value;
				if (data[0] != this.defaultSelected[0]) {
					data[1] = 0;
					data[2] = 0;
				}
				if (data[1] != this.defaultSelected[1]) {
					data[2] = 0;
				}
				this.$emit('columnChange', data);
			},
			setColumnData() {
				this.province_list = areaList.province_list;
				if ((typeof this.defaultSelected[0]) == 'number') {
					//省编码截取前2位。
					let province_code = areaList.province_list[this.defaultSelected[0]].value.substring(0, 2);
					areaList.city_list.map((item, index) => {
						let city_code = item.value.substring(0, 2);
						if (province_code == city_code) {
							this.city_list.push(item)
						}

					})
					if ((typeof this.defaultSelected[1]) == 'number') {
						let city_uncode = this.city_list[this.defaultSelected[1]].value.substring(0, 4);
						areaList.county_list.map(item => {
							let county = item.value.substring(0, 4);
							if (city_uncode == county) {
								this.county_list.push(item);
							}
						})
					}

				}
			},
			cancel() {
				this.$emit('cancel');
			},
			confirm() {
				let [x, z, y] = this.defaultSelected;
				this.$emit('confirm', {
					data: [this.province_list[x], this.city_list[z], this.county_list[y]],
					multi_index: this.defaultSelected,
				});
			}

		},
		created() {
			this.setColumnData();

		}
	}
</script>

<style lang="scss" scoped>
	.picker-view {
		width: 100%;
		height: 150px;
		background-color: #FFFFFF;
	}

	.districtSelector-haed {
		display: flex;
		align-items: center;
		padding: 0 20px;
		justify-content: space-between;
		height: 40px;

		.cancel {
			color: #666;
			font-size: 14px;
		}

		.confirm {
			color: #3B9CFF;
			font-size: 14px;
		}
	}
</style>
